<template>
  <section class="vpt-tabs"
           :style="tabsStyle">
    <arco-tabs :active-key="active"
            @change="handleChange">
      <arco-tab-pane key="1"
                  title="需求停留平均天数"> </arco-tab-pane>
      <arco-tab-pane key="2"
                  title="处室需求申请量排行TOP5"> </arco-tab-pane>
    </arco-tabs>
    <div class="chartView"
         :style="chartStyle">
      <VptReviewBar v-show="active == 1"
                    v-bind="$attrs"
                    :bottom="bottom"
                    :chartType="chartType"></VptReviewBar>
      <VptOfficeDemand v-show="active == 2"
                       v-bind="$attrs"
                       :height="height"
                       :endValue="endValue"
                       :width="width"
                       :iconWidth="iconWidth"
                       :iconHeight="iconHeight"
                       :labelFontSize="labelFontSize"
                       :valueFontSize="valueFontSize"
                       :barWidth="barWidth"
                       :labelHeight="labelHeight"
                       :grid="grid"></VptOfficeDemand>
    </div>
  </section>
</template>

<script setup>
import VptReviewBar from "@/pages/components/review-bar/index.vue";
import VptOfficeDemand from "@/pages/components/office-demand/index.vue";
import { fontSize } from "@/utils/rem/rem.js";

const props = defineProps({
  yAxisProps: { type: Object, default: () => ({}) },
  iconWidth: { type: Number, default: 24 },
  iconHeight: { type: Number, default: 14 },
  labelFontSize: { type: Number, default: 12 },
  valueFontSize: { type: Number, default: 12 },
  barWidth: { type: Number, default: 12 },
  chartType: { type: String, default: "" },
  width: { type: String, default: "5.4rem" },
  bottom: { type: Number, default: 80 },
  // label高度
  labelHeight: { type: Number, default: 24 },
  active: {
    type: String,
    default: "1",
  },
  grid: { type: Object, default: () => ({ top: fontSize(20) }) },
  height: {
    type: String,
    default: "1.2rem",
  },
  tabsStyle: {
    type: Object,
    default: () => ({
      width: "5.36rem",
      height: "4.02rem",
      marginTop: "0.16rem",
    }),
  },
  chartStyle: {
    type: Object,
    default: () => ({
      height: "2.4rem",
      //  height: "calc(100% - 5rem)"
    }),
  },
  endValue: {
    type: Number,
    default: 3,
  },
});

const emit = defineEmits(["change"]);
const handleChange = (val) => {
  emit("change", val);
};
</script>

<style lang="less" scoped>
@import "../../assets/style/gobal-largescreen.less";

.vpt-tabs {
  width: 5.36rem;
  height: 2.3rem;
  margin-top: 0.16rem;
  background: #1470cc1a;
  border: 0.01rem solid #e6ebf5;
}
.chartView {
  width: 100%;
  // height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}
:deep(.arco-tabs-content) {
  padding-top: 0 !important;
}
</style>